<template>
  <el-select
    popper-class="country-popper"
    :class="['country-select', showPrefix ? '' : 'select-no-prefix']"
    value-key="iso"
    filterable
    v-model="curCountry"
    :placeholder="$t('formItem.countryRegion')"
    @change="countryChange($event)"
    @focus="handleSelectClick"
    @hook:mounted="handleSelectClick"
    @visible-change="handleSelectClick"
  >
    <template slot="prefix" v-if="showPrefix">
      <img
        class="icon"
        v-if="curCountry.icon"
        v-lazy="$globalFn.imgPrefixUrl(curCountry.icon, 'national_flag')"
        loading="lazy"
        alt="Country flag"
        title="Selected country flag"
      />
      <img
        class="icon"
        v-else
        src="https://cd.sealmg.com/assets/img/mobile/lang-icon.png"
        loading="lazy"
        alt="Language icon"
        title="Default language icon"
      />
    </template>
    <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item">
      <div class="option-item flexbox flex-align-center">
        <img
          class="icon"
          v-lazy="$globalFn.imgPrefixUrl(item.icon, 'national_flag')"
          alt="Country flag"
          title="Country selection option"
          srcset=""
          loading="lazy"
        />
        <span class="text">{{ item.name }}</span>
      </div>
    </el-option>
  </el-select>
</template>
<script>
  export default {
    props: {
      showDefault: {
        type: Boolean,
        default: () => true
      },
      showPrefix: {
        type: Boolean,
        default: () => true
      },
      targetCountry: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        // countryList:[],
        curCountry: {},
        userSelect: {}
      }
    },
    watch: {
      targetCountry: {
        handler(newVal) {
          if (Object.keys(newVal).length) {
            let list1 = []
            if (newVal.name) {
              list1 = this.countryList.filter(item => item.name === newVal.name)
            } else {
              list1 = this.countryList.filter(item => item.iso == newVal.country_code)
            }
            this.curCountry = list1.length ? list1[0] : {}
          }
        },
        deep: true,
        immated: true
      },
      showDefault: {
        handler(newVal) {
          if (newVal) {
            let list2 = []
            list2 = this.countryList.filter(item => item.iso == this.userSelect.country_code)
            this.curCountry = list2.length ? list2[0] : {}
          } else {
            this.curCountry = {}
          }
        },
        deep: true,
        immated: true
      }
    },
    computed: {
      countryList() {
        let regions = []
        let list = []
        if (this.$store && this.$store.state && this.$store.state.initData && this.$store.state.initData.regions) {
          regions = this.$store.state.initData.regions
          return regions
        }
        // if (regions.length) {
        //   regions.map((item) => {
        //     if (item._child && item._child.length) {
        //       list.push(...item._child);
        //     }
        //   });
        // }
      }
    },
    mounted() {
      this.userSelect = this.$cookies.get('userSelect') || {}
      this.handleSelectClick()
      if (this.showDefault) {
        let list2 = []
        list2 = this.countryList.filter(item => item.iso == this.userSelect.country_code)
        this.curCountry = list2.length ? list2[0] : {}
      }
    },
    methods: {
      handleSelectClick(e) {
        if (process.client) {
          this.$nextTick(() => {
            setTimeout(() => {
              document.querySelectorAll('.el-input__inner').forEach(input => {
                input.removeAttribute('readonly')
              })
            }, 200)
          })
        }
      },
      countryChange(item) {
        // this.$refs.selectRef.focus();
        this.$emit('itemChange', item)
      },
      clear(async) {
        this.$nextTick(() => {
          if (!async) {
            // ios 手机有延迟问题
            setTimeout(() => {
              // 情况一：单个
              const { select } = this.$refs
              const inputs = select.$el.querySelector('.el-input__inner')
              inputs.removeAttribute('readonly')
              // 情况二：表单中存在多个select   problemInfo表单ref
              // const { problemInfo } = this.$refs;
              // const inputs = problemInfo.$el.querySelectorAll(".el-input__inner");
              for (var i = 0; i < inputs.length; i++) {
                inputs[i].removeAttribute('readonly')
              }
            }, 200)
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .country-select {
    flex: 1;
    width: 100%;
    /deep/.el-input__prefix {
      .icon {
        width: 24px;
        height: 24px;
        margin-top: 8px;
        border-radius: 50%;
      }
    }
    /deep/.el-input__inner {
      height: 48px;
      line-height: 48px;
    }
  }
  .select-no-prefix {
    /deep/.el-input__inner {
      padding: 0 16px;
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
  }
  @media screen and (max-width: 767px) {
    .country-select {
    }
  }
</style>
